<template>
	<uni-transition mode-class="fade" :duration="250" :show="true">
		<view>
			<view class="tab-content">
				<slot />
			</view>
			<view class="tabbar">
				<template v-for="(item, index) in tabBarList">
					<template v-if="index == 2 && tabBarList.length > 4 && isAuth" }>
						<view class="tabbar-center-item" :key="index">
						</view>
					</template>
					<view class="tabar-item" :key="item.pagePath" ref="navItem"
						:class="{tabBarActive: index == selectIdx}"
						:style="{color: index == selectIdx ? selectColor : '#777'}"
						@click="handleTabClick(item, index)">
						<image class="tabbar-img" :src="index == selectIdx ? item.selectedIconPath : item.iconPath"
							mode="">
						</image>
						<text>{{item.text}}</text>
					</view>
					<template v-if="index == 1 && isAuth" }>
						<view class="tabbar-center-item" :key="index">
						</view>
					</template>
				</template>
				<!-- 需要判断是否付费 -->
				<view class="tabbar-center-add" v-if="isAuth"
					:style="{ backgroundColor: selectColor, left: tabBarList.length > 4 ? '44%;' : '50%;' }"
					@click="handleAuthAdd">
					+
				</view>
			</view>
		</view>

		<view class="popur-mask-layer" v-if="isPopur">
			<view class="popur">
				<view class="card-item" @click="handlePopurClick('state')">
					<image class="img" src="/static/images/publish-shop.png"></image>
					<view class="detail">
						<view class="title">发布动态</view>
						<view class="msg">可发布商户动态等，不支持购买</view>
					</view>
					<image class="rg-icon" src="/static/images/arrow-right-bold.png"></image>
				</view>
				<view class="card-item" @click="handlePopurClick('shop')">
					<image class="img" src="/static/images/publish-state.png"></image>
					<view class="detail">
						<view class="title">发布商品</view>
						<div class="msg">快速发布商品</div>
					</view>
					<image class="rg-icon" src="/static/images/arrow-right-bold.png"></image>
				</view>

				<view class="close-card">
					<image src="/static/images/X.png" class="close-icon" mode="" @click="isPopur = false"></image>
				</view>
			</view>
		</view>
	</uni-transition>
</template>

<script>
	// {
	// 	"pagePath": "pages/index/default/default",
	// 	"text": "首页",
	// 	"iconPath": "/static/images/tabbar/list.png",
	// 	"selectedIconPath": "/static/images/tabbar/list-active.png"
	// }, {
	// 	"pagePath": "pages/category/index/index",
	// 	"text": "分类",
	// 	"iconPath": "/static/images/tabbar/Grid.png",
	// 	"selectedIconPath": "/static/images/tabbar/Grid-active.png"
	// }, {
	// 	"pagePath": "pages/index/cart/cart",
	// 	"text": "购物车",
	// 	"iconPath": "/static/images/tabbar/Shopping-cart.png",
	// 	"selectedIconPath": "/static/images/tabbar/Shopping-cart-active.png"
	// }, {
	// 	"pagePath": "pages/index/member/member",
	// 	"text": "我的",
	// 	"iconPath": "/static/images/tabbar/User.png",
	// 	"selectedIconPath": "/static/images/tabbar/User-active.png"
	// }

	// {
	// 	"pagePath": "pages/newHome/newHome/index",
	// 	"text": "首页",
	// 	"iconPath": "/static/images/tabbar/list.png",
	// 	"selectedIconPath": "/static/images/tabbar/list-active.png"
	// }, {
	// 	"pagePath": "pages/newHome/supplierList/index",
	// 	"text": "供应商",
	// 	"iconPath": "/static/images/tabbar/gmail-groups.png",
	// 	"selectedIconPath": "/static/images/tabbar/gmail-groups-select.png"
	// }, {
	// 	"pagePath": "pages/newHome/orderList/index",
	// 	"text": "客户订单",
	// 	"iconPath": "/static/images/tabbar/kh-order.png",
	// 	"selectedIconPath": "/static/images/tabbar/kh-order-select.png"
	// }, {
	// 	"pagePath": "pages/newHome/managemenCenter/index",
	// 	"text": "管理中心",
	// 	"iconPath": "/static/images/tabbar/settings.png",
	// 	"selectedIconPath":"/static/images/tabbar/settings-select.png"
	// }
	export default {
		name: 'costom-tabbar',
		data() {
			return {
				tabBarList: [],
				selectIdx: uni.getStorageSync('SELECTINDEX') ?? 0,
				isPopur: false,
				isAuth: false,
			}
		},
		props: {
			isRole: {
				type: String,
				default: 'user',
			},
			selectColor: { // '#FF9518'
				type: String,
				default: '#D0241C'
			}
		},
		created() {
			this.handleReload()
			const that = this
			uni.addInterceptor('switchTab', {
				invoke(e) {
					if (e.url === "/" + that.tabBarList[0].pagePath) {
						that.selectIdx = 0
					} else {
						that.selectIdx = uni.getStorageSync('SELECTINDEX') ?? 0
					}
				}
			})
		},
		methods: {
			handleReload() { // 重新加载底部的tabbbar
				const roleTypes = {
					1: [{
							"pagePath": "pages/newHome/newHome/index",
							"text": "首页",
							"iconPath": "/static/images/tabbar/list.png",
							"selectedIconPath": "/static/images/tabbar/list-active.png",
						},
						{
							"pagePath": "pages/newHome/supplierList/index",
							"text": "销售商",
							"iconPath": "/static/images/tabbar/gmail-groups.png",
							"selectedIconPath": "/static/images/tabbar/gmail-groups-select.png"
						},
						{
							"pagePath": "pages/category/index/index",
							"text": "分类",
							"iconPath": "/static/images/tabbar/Grid.png",
							"selectedIconPath": "/static/images/tabbar/Grid-active.png"
						}, {
							"pagePath": "pages/index/cart/cart",
							"text": "购物车",
							"iconPath": "/static/images/tabbar/Shopping-cart.png",
							"selectedIconPath": "/static/images/tabbar/Shopping-cart-active.png"
						}, {
							"pagePath": "pages/index/member/member",
							"text": "我的",
							"iconPath": "/static/images/tabbar/User.png",
							"selectedIconPath": "/static/images/tabbar/User-active.png"
						}
					],
					2: [{
						"pagePath": "pages/newHome/newHome/index",
						"text": "首页",
						"iconPath": "/static/images/tabbar/list.png",
						"selectedIconPath": "/static/images/tabbar/list-active.png"
					}, {
						"pagePath": "pages/newHome/supplierList/index",
						"text": "供应商",
						"iconPath": "/static/images/tabbar/gmail-groups.png",
						"selectedIconPath": "/static/images/tabbar/gmail-groups-select.png"
					}, {
						"pagePath": "pages/newHome/orderList/index",
						"text": "客户订单",
						"iconPath": "/static/images/tabbar/kh-order.png",
						"selectedIconPath": "/static/images/tabbar/kh-order-select.png"
					}, {
						"pagePath": "pages/newHome/managemenCenter/index",
						"text": "管理中心",
						"iconPath": "/static/images/tabbar/settings.png",
						"selectedIconPath": "/static/images/tabbar/settings-select.png"
					}]
				}
				const token = uni.getStorageSync('userToken')
				const userInfo = uni.getStorageSync('USER_INFO')
				console.log(userInfo.roletype);
				if (!token) {
					this.tabBarList = roleTypes[1]
				} else {
					// 这里会进行判断 如果是有关注 会出现 tab栏页面 否则为去除
					this.tabBarList = roleTypes[userInfo.roletype]
					if (userInfo.roletype == 1) {
						// 进行区分 如果有关注的销售商
						uni.navigateTo({
							url: 'pages/newHome/newHome/index'
						})
						// 普通用户
					} else if (2) {
						uni.navigateTo({
							url: 'pages/newHome/managemenCenter/index'
						})
						// 销售商
					}
				}
			},
			handleTabClick(item, index) {
				// 需要自定义我们的tabbar的switch的naviaget
				this.switchTab(item, index)
				this.selectIdx = index
			},
			switchTab(item, index) {
				const navItem = this.$refs.navItem
				let url = '/' + item.pagePath
				let pagePath = url
				this.tabBarList.forEach((v, i) => {
					if (item.pagePath === v.pagePath) {
						uni.setStorageSync('SELECTINDEX', index)
					}
				})
				uni.switchTab({
					url
				})
			},
			handleAuthAdd() { // 添加商品/发布动态模态框
				this.isPopur = true
			},
			handlePopurClick(type) {
				if (type === 'state') { // 前往发布动态
					console.log('前往发布动态');
					uni.navigateTo({
						url: '/pages/publish/publishState/index'
					})
				} else { // 前往发布商品
					console.log('前往发布商品');
					uni.navigateTo({
						url: '/pages/publish/publishShop/index'
					})
				}
				this.isPopur = false // 关闭 添加商品/发布动态模态框
			},
		},
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 150rpx;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 140rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx 50rpx;
		box-sizing: border-box;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		box-shadow: 0px 4px 22px #c2c2c7;
		transition: all 250ms;
		// z-index: 99999;

		.tabar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: all 250ms;

			.tabbar-img {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 6rpx;
				transition: all 250ms;
			}

			text {
				font-size: 24rpx;
			}
		}

		.tabbar-center-item {
			flex: .5;
		}

		/* 为了让中间区域更大 放下我们的 */
		.tabbar-text {
			font-size: 24rpx;
			color: #666;
		}

		.tabBarActive {
			.tabbar-img {
				width: 50rpx;
				height: 50rpx;
			}

			.tabbar-text {
				color: #333;
			}
		}

		.tabBarActive {
			transition: all 250ms;
		}

		.tabbar-center-add {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -30rpx;
			width: 106rpx;
			height: 106rpx;
			border-radius: 50%;
			color: #fff;
			font-size: 60rpx;
			font-weight: 600;
			line-height: 80rpx;
			text-align: center;
			transition: all 250ms;
			border: 10rpx solid #fff;
		}
	}

	.popur-mask-layer {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .25);
		z-index: 866866;

		.popur {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 60rpx 18rpx;
			background-color: #fff;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			box-sizing: border-box;

			.card-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 14rpx 28rpx;
				border-radius: 24rpx;
				box-sizing: border-box;
				margin-bottom: 28rpx;
				background-color: #FFDCD1;

				.img {
					width: 120rpx;
					height: 120rpx;
				}

				.detail {
					flex: 1;

					.title {
						font-size: 34rpx;
						color: #333;
					}

					.msg {
						font-size: 28rpx;
						color: #8E8886;
					}
				}

				.rg-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.card-item:nth-child(2) {
				background-color: #FFD3D1 !important;
			}

			.close-card {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				margin-top: 30rpx;
				background-color: #F3F3F3;
				border-radius: 50%;

				.close-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>